<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body th:fragment="action_node">
<table id="mytab" class="table table-hover text-nowrap"></table>
<div id="toolbar" class="btn-group pull-left" style="margin-left:20px">
    <button id="btn_edit" type="button" class="btn btn-default" style="border-radius: 0">
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
    </button>
    <button id="btn_delete" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
    </button>
    <button id="btn_add" type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
    </button>
</div>
<script type="text/javascript">

    new Vue({
        data: {
            dataGrid: []
        },
        created() {
            var self = this;
            $.ajax({
                type: "post",
                url: "/grid/display_grid_view?nodeId=10",
                async: true,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    var cols = [];
                    cols.push({
                        field: '全选',
                        field: 'select',
                        checkbox: true,
                    });
                    for (var i = 0; i < data.length; i++) {
                        var temp = data[i];
                        cols.push({
                            field: temp.gridField,
                            title: temp.gridTitle,
                            align: temp.gridAlign
                        });
                    }
                    //生成用户数据
                    $('#mytab').bootstrapTable('destroy').bootstrapTable({
                        method: 'post',
                        contentType: "application/x-www-form-urlencoded",//必须要有！！！！
                        url: "../index.php/admin/index/userManagement",//要请求数据的文件路径
                        height: tableHeight(),//高度调整
                        toolbar: '#toolbar',//指定工具栏
                        striped: true, //是否显示行间隔色
                        dataField: "res",//bootstrap table 可以前端分页也可以后端分页，这里
                        //我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的
                        //rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
                        pageNumber: 1, //初始化加载第一页，默认第一页
                        pagination: true,//是否分页
                        queryParamsType: 'limit',//查询参数组织方式
                        queryParams: queryParams,//请求服务器时所传的参数
                        sidePagination: 'server',//指定服务器端分页
                        pageSize: 10,//单页记录数
                        pageList: [5, 10, 20, 30],//分页步进值
                        showRefresh: true,//刷新按钮
                        showColumns: true,
                        clickToSelect: true,//是否启用点击选中行
                        toolbarAlign: 'right',//工具栏对齐方式
                        buttonsAlign: 'right',//按钮对齐方式
                        toolbar: '#toolbar',//指定工作栏
                        columns: cols
                    })
                },
                error: function (data) {
                    console.log("读取jsonName error!");
                }
            });
        }
    });

    $(window).resize(function () {
        $('#mytab').bootstrapTable('resetView', {
            height: tableHeight()
        })
    });

    //三个参数，value代表该列的值
    function operateFormatter(value, row, index) {
        if (value == 2) {
            return '<i class="fa fa-lock" style="color:red"></i>'
        } else if (value == 1) {
            return '<i class="fa fa-unlock" style="color:green"></i>'
        } else {
            return '数据错误'
        }
    }

    //请求服务数据时所传参数
    function queryParams(params) {
        return {
            //每页多少条数据
            pageSize: params.limit,
            //请求第几页
            pageIndex: params.pageNumber,
            Name: $('#search_name').val(),
            Tel: $('#search_tel').val()
        }
    }

    //查询按钮事件
    $('#search_btn').click(function () {
        $('#mytab').bootstrapTable('refresh', {url: '../index.php/admin/index/userManagement'});
    })

    //tableHeight函数
    function tableHeight() {
        //可以根据自己页面情况进行调整
        return $(window).height() - 280;
    }
</script>
</body>
</html>